<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';

// 联系人数据
const contacts = ref([
  {
    id: 1,
    name: '林文渊',
    avatar: 'https://picsum.photos/seed/linwenyuan/100/100',
    lastMessage: '明天的祭祖活动记得准时参加',
    time: '10:23',
    messages: [
      { type: 'system', content: '今天 10:23' },
      { sender: 'other', content: '明天的祭祖活动记得准时参加', time: '10:23' },
      { sender: 'self', content: '收到，一定准时到达', time: '10:24' },
      { sender: 'other', content: '宗祠那边已经准备好了', time: '10:25' },
      { sender: 'self', content: '好的，需要我带些什么过去吗？', time: '10:26' },
      { sender: 'other', content: '带上族谱的副本就好', time: '10:27' }
    ]
  },
  {
    id: 2,
    name: '黄德芳',
    avatar: 'https://picsum.photos/seed/huangdefang/100/100',
    lastMessage: '族谱修订工作进展顺利',
    time: '昨天',
    messages: [
      { type: 'system', content: '昨天' },
      { sender: 'other', content: '族谱修订工作进展顺利', time: '15:20' },
      { sender: 'self', content: '太好了，辛苦了', time: '15:21' },
      { sender: 'other', content: '第23版族谱已经完成初稿', time: '15:22' },
      { sender: 'self', content: '什么时候可以看下初稿？', time: '15:23' },
      { sender: 'other', content: '明天下午可以来宗祠查看', time: '15:24' }
    ]
  },
  {
    id: 3,
    name: '张明远',
    avatar: 'https://picsum.photos/seed/zhangmingyuan/100/100',
    lastMessage: '清明祭祖活动安排',
    time: '03/15',
    messages: [
      { type: 'system', content: '03/15' },
      { sender: 'other', content: '清明祭祖活动安排已确定', time: '09:15' },
      { sender: 'self', content: '好的，请发我详细安排', time: '09:16' },
      { sender: 'other', content: '时间：4月5日 上午9点', time: '09:17' },
      { sender: 'other', content: '地点：宗祠前广场', time: '09:18' },
      { sender: 'self', content: '收到，我会准时参加', time: '09:19' }
    ]
  }
]);

const searchQuery = ref('');
const activeContact = ref(contacts.value[0]);
const newMessage = ref('');

const messagesContainer = ref<HTMLElement | null>(null);

// 过滤联系人
const filteredContacts = computed(() => {
  if (!searchQuery.value) return contacts.value;
  
  const query = searchQuery.value.toLowerCase();
  return contacts.value.filter(contact => 
    contact.name.toLowerCase().includes(query) || 
    contact.lastMessage.toLowerCase().includes(query)
  );
});

// 选择联系人
const selectContact = (contact: any) => {
  activeContact.value = contact;
  scrollToBottom();
};

// 发送消息
const sendMessage = () => {
  if (!newMessage.value.trim()) return;
  
  const now = new Date();
  const time = `${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}`;
  
  activeContact.value.messages.push({
    sender: 'self',
    content: newMessage.value,
    time: time
  });
  
  // 模拟回复
  setTimeout(() => {
    activeContact.value.messages.push({
      sender: 'other',
      content: '收到',
      time: `${now.getHours()}:${(now.getMinutes() + 1).toString().padStart(2, '0')}`
    });
    scrollToBottom();
  }, 1000);
  
  newMessage.value = '';
  scrollToBottom();
};

// 滚动到底部
const scrollToBottom = () => {
  setTimeout(() => {
    if (messagesContainer.value) {
      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
    }
  }, 50);
};

onMounted(() => {
  scrollToBottom();
});
</script>

<template>
  <div class="chat-container h-full">
    <!-- 聊天主界面 -->
    <div class="chat-main">
      <!-- 左侧联系人列表 -->
      <div class="contact-list">
        <div class="search-box mb-4">
          <el-input 
            v-model="searchQuery" 
            placeholder="搜索联系人" 
            size="small"
            prefix-icon="el-icon-search"
          />
        </div>
        
        <div class="contacts">
          <div 
            v-for="(contact, index) in filteredContacts" 
            :key="index"
            class="contact-item"
            :class="{ active: activeContact === contact }"
            @click="selectContact(contact)"
          >
            <div class="avatar">
              <img :src="contact.avatar" alt="头像" class="w-full h-full object-cover rounded-full">
            </div>
            <div class="contact-info">
              <div class="contact-name">{{ contact.name }}</div>
              <div class="contact-last-message">{{ contact.lastMessage }}</div>
            </div>
            <div class="contact-time">{{ contact.time }}</div>
          </div>
        </div>
      </div>

      <!-- 右侧聊天窗口 -->
      <div class="chat-window">
        <!-- 顶部标题栏 -->
        <div class="chat-header">
          <div class="current-contact">
            <div class="avatar">
              <img :src="activeContact.avatar" alt="头像" class="w-full h-full object-cover rounded-full">
            </div>
            <h3>{{ activeContact.name }}</h3>
          </div>
          <div class="header-actions">
            <el-button type="primary" plain size="small" circle>
              <i class="el-icon-search"></i>
            </el-button>
            <el-button type="primary" plain size="small" circle>
              <i class="el-icon-star-off"></i>
            </el-button>
            <el-button type="primary" plain size="small" circle>
              <i class="el-icon-more"></i>
            </el-button>
          </div>
        </div>

        <!-- 消息区域 -->
        <div class="chat-messages" ref="messagesContainer">
          <div v-for="(msg, index) in activeContact.messages" :key="index" class="message">
            <!-- 系统消息 -->
            <div v-if="msg.type === 'system'" class="system-message">
              <span>{{ msg.content }}</span>
            </div>
            
            <!-- 自己的消息 -->
            <div v-else-if="msg.sender === 'self'" class="message-bubble self-message">
              <div class="message-content">
                {{ msg.content }}
              </div>
              <div class="message-time">{{ msg.time }}</div>
            </div>
            
            <!-- 他人的消息 -->
            <div v-else class="message-bubble other-message">
              <div class="avatar">
                <img :src="activeContact.avatar" alt="头像" class="w-full h-full object-cover rounded-full">
              </div>
              <div class="message-content">
                {{ msg.content }}
              </div>
              <div class="message-time">{{ msg.time }}</div>
            </div>
          </div>
        </div>

        <!-- 输入区域 -->
        <div class="chat-input">
          <div class="input-toolbar">
            <el-button type="primary" plain size="small" circle>
              <i class="el-icon-picture"></i>
            </el-button>
            <el-button type="primary" plain size="small" circle>
              <i class="el-icon-video-camera"></i>
            </el-button>
            <el-button type="primary" plain size="small" circle>
              <i class="el-icon-document"></i>
            </el-button>
            <el-button type="primary" plain size="small" circle>
              <i class="el-icon-smile"></i>
            </el-button>
          </div>
          <div class="input-box">
            <el-input
              v-model="newMessage"
              type="textarea"
              :rows="3"
              placeholder="请输入消息..."
              @keyup.enter="sendMessage"
            />
            <el-button type="primary" class="send-btn" @click="sendMessage">
              发送
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.chat-container {
  height: 93vh;
  background-color: #f5f5f5;
  background-image: url("image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23deb887' fill-opacity='0.1' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
  font-family: 'SimSun', '宋体', 'Microsoft YaHei', sans-serif;
}

.chat-main {
  display: flex;
  height: 100%;
  max-width: 1440px;
  margin: 0 auto;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  
  /* 左侧联系人列表 */
  .contact-list {
    width: 300px;
    border-right: 1px solid #e0d6c8;
    background: linear-gradient(135deg, #f8f4f0 0%, #f5f0e8 100%);
    
    .search-box {
      padding: 12px;
    }
    
    .contacts {
      height: calc(100% - 60px);
      overflow-y: auto;
      
      /* 自定义滚动条 */
      &::-webkit-scrollbar {
        width: 6px;
      }
      
      &::-webkit-scrollbar-track {
        background: #f0f0f0;
        border-radius: 3px;
      }
      
      &::-webkit-scrollbar-thumb {
        background: #964b00;
        border-radius: 3px;
      }
    }
    
    .contact-item {
      display: flex;
      align-items: center;
      padding: 12px 16px;
      cursor: pointer;
      transition: all 0.2s ease;
      border-left: 3px solid transparent;
      
      &:hover {
        background-color: #f0f8f5;
      }
      
      &.active {
        background-color: #f0f8f5;
        border-left: 3px solid #964b00;
      }
      
      .avatar {
        width: 50px;
        height: 50px;
        margin-right: 12px;
      }
      
      .contact-info {
        flex: 1;
        overflow: hidden;
        
        .contact-name {
          font-weight: bold;
          color: #5a4a3a;
          margin-bottom: 4px;
        }
        
        .contact-last-message {
          font-size: 0.9rem;
          color: #a98c72;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      
      .contact-time {
        font-size: 0.85rem;
        color: #a98c72;
      }
    }
  }
  
  /* 右侧聊天窗口 */
  .chat-window {
    flex: 1;
    display: flex;
    flex-direction: column;
    
    .chat-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 16px;
      border-bottom: 1px solid #e0d6c8;
      background: #fffbe7;
      
      .current-contact {
        display: flex;
        align-items: center;
        
        .avatar {
          width: 40px;
          height: 40px;
          margin-right: 12px;
        }
        
        h3 {
          font-size: 1.2rem;
          color: #5a4a3a;
          font-weight: bold;
        }
      }
      
      .header-actions {
        display: flex;
        gap: 8px;
      }
    }
    
    .chat-messages {
      flex: 1;
      padding: 20px;
      overflow-y: auto;
      background: #fff;
      
      /* 自定义滚动条 */
      &::-webkit-scrollbar {
        width: 6px;
      }
      
      &::-webkit-scrollbar-track {
        background: #f0f0f0;
        border-radius: 3px;
      }
      
      &::-webkit-scrollbar-thumb {
        background: #964b00;
        border-radius: 3px;
      }
      
      .system-message {
        text-align: center;
        margin: 10px 0;
        
        span {
          background: #e0d6c8;
          color: #5a4a3a;
          padding: 4px 12px;
          border-radius: 12px;
          font-size: 0.85rem;
        }
      }
      
      .message-bubble {
        display: flex;
        margin-bottom: 16px;
        
        &.self-message {
          justify-content: flex-end;
          
          .message-content {
            background: #964b00;
            color: #fff;
            border-radius: 12px 4px 12px 12px;
            padding: 10px 14px;
            max-width: 70%;
          }
          
          .message-time {
            color: #a98c72;
            font-size: 0.75rem;
            margin-left: 6px;
            margin-top: 4px;
          }
        }
        
        &.other-message {
          .avatar {
            width: 36px;
            height: 36px;
            margin-right: 10px;
          }
          
          .message-content {
            background: #f0f8f5;
            color: #5a4a3a;
            border-radius: 4px 12px 12px 12px;
            padding: 10px 14px;
            max-width: 70%;
          }
          
          .message-time {
            color: #a98c72;
            font-size: 0.75rem;
            margin-left: 6px;
            margin-top: 4px;
          }
        }
      }
    }
    
    .chat-input {
      border-top: 1px solid #e0d6c8;
      padding: 12px 16px;
      background: #fff;
      
      .input-toolbar {
        display: flex;
        gap: 10px;
        margin-bottom: 8px;
        
        .el-button {
          width: 32px;
          height: 32px;
          padding: 0;
          border-color: #e0d6c8;
          
          &:hover {
            background-color: #f0f8f5;
            color: #964b00;
          }
        }
      }
      
      .input-box {
        position: relative;
        
        .el-textarea {
          border: 1px solid #e0d6c8;
          border-radius: 8px;
          
          .el-textarea__inner {
            border: none;
            resize: none;
            padding-right: 80px;
            
            &:focus {
              box-shadow: none;
            }
          }
        }
        
        .send-btn {
          position: absolute;
          right: 10px;
          bottom: 10px;
          height: 32px;
          padding: 0 15px;
          background: #964b00;
          border-color: #964b00;
          
          &:hover {
            background: #a85c11;
            border-color: #a85c11;
          }
        }
      }
    }
  }
}
</style>